<template>
  <div class="table-box">
    <ProTable
      ref="proTableBox"
      :columns="dataGrid.columns"
      :request-api="rosterPageList"
      :init-param="dataGrid.initParam"
      :tool-button="['setting', 'fullscreen']"
      :data-callback="dataCallback"
      @cell-click="dataGridCellClick"
    >
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>

    <el-drawer v-model="drawerObj.visible" direction="rtl" size="680px" :with-header="false">
      <el-tabs v-model="tabsObj.activeName" @tab-click="tabClick">
        <el-tab-pane label="基础资料" name="basic">
          <ProForm
            class="mb50"
            v-if="drawerObj.visible"
            :visible="true"
            ref="proFormBox"
            :options="addForm.options"
            :form-attrs="addForm.formAttrs"
            :save-button="false"
            @get-model="(form: any) => (addForm.form = form)"
            @cancel="(flag: boolean) => (drawerObj.visible = flag)"
          >
          </ProForm>
        </el-tab-pane>

        <el-tab-pane label="家庭信息" name="familyInfo">
          <div class="table-roster-box">
            <ProTable
              ref="proTableFamilyInfo"
              :pagination="false"
              :request-auto="false"
              :columns="familyInfoData.columns"
              :request-api="familyInfoListById"
              :init-param="familyInfoData.initParam"
            >
              <template #tableHeader>
                <GlobalButton :button-list="familyInfoData.headButtonList"></GlobalButton>
              </template>
              <template #operation="{ row }">
                <GlobalButton :button-list="familyInfoData.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </div>
        </el-tab-pane>

        <el-tab-pane label="工作经历" name="workExperience">
          <div class="table-roster-box">
            <ProTable
              ref="proTableWorkExperience"
              :pagination="false"
              :request-auto="false"
              :columns="workExperienceData.columns"
              :init-param="workExperienceData.initParam"
              :request-api="workInfoList"
            >
              <template #tableHeader>
                <GlobalButton :button-list="workExperienceData.headButtonList"></GlobalButton>
              </template>
              <template #operation="{ row }">
                <GlobalButton :button-list="workExperienceData.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </div>
        </el-tab-pane>

        <el-tab-pane label="教育经历" name="educationExperience">
          <div class="table-roster-box">
            <ProTable
              ref="proTableEducationExperience"
              :pagination="false"
              :request-auto="false"
              :columns="educationExperienceData.columns"
              :init-param="educationExperienceData.initParam"
              :request-api="educationInfoList"
            >
              <template #tableHeader>
                <GlobalButton :button-list="educationExperienceData.headButtonList"></GlobalButton>
              </template>
              <template #operation="{ row }">
                <GlobalButton :button-list="educationExperienceData.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </div>
        </el-tab-pane>

        <el-tab-pane label="财务信息" name="financialInfo">
          <div class="table-roster-box">
            <GlobalButton class="mb5" :button-list="financialInfoData.rowButtonList"></GlobalButton>
            <el-descriptions :column="2" border>
              <el-descriptions-item
                width="80px"
                align="center"
                :label="head.label"
                v-for="head of financialInfoData.columns"
                :key="head.prop"
              >
                {{
                  head.enum
                    ? _tableTransitionEnum(head.enum, financialInfoData.data[head.prop])
                    : financialInfoData.data[head.prop] || '-'
                }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>

        <el-tab-pane label="合同信息" name="contractInformation">
          <div class="table-roster-box">
            <ProTable
              ref="proTableContractInformation"
              :columns="contractInformationData.columns"
              :request-api="contractInfoListByRosterId"
              :init-param="contractInformationData.initParam"
              :pagination="false"
              :request-auto="false"
            >
              <template #tableHeader>
                <GlobalButton :button-list="contractInformationData.headButtonList"></GlobalButton>
              </template>
              <template #operation="{ row }">
                <GlobalButton :button-list="contractInformationData.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </div>
        </el-tab-pane>

        <el-tab-pane label="其他信息" name="otherInfo">
          <div class="table-roster-box">
            <GlobalButton class="mb5" :button-list="otherInfoData.rowButtonList"></GlobalButton>
            <el-descriptions :column="2" border>
              <el-descriptions-item
                width="80px"
                align="center"
                :label="head.label"
                v-for="head of otherInfoData.columns"
                :key="head.prop"
              >
                {{
                  head.enum
                    ? _tableTransitionEnum(head.enum, otherInfoData.data[head.prop])
                    : otherInfoData.data[head.prop] || '-'
                }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>

        <el-tab-pane label="附件上传" name="file" v-if="fileObj.visible">
          <div class="table-roster-box">
            <FileData
              v-model:visible="fileObj.visible"
              area="roster"
              bucket-name="ehr"
              dictionaries-code="ehrFileType"
              :file-id="fileObj.fileId"
              :download-permission-code="fileObj.downloadPermissionCode"
              :delete-permission-code="fileObj.deletePermissionCode"
              :up-loading-permission-code="fileObj.upLoadingPermissionCode"
              :preview-permission-code="fileObj.previewPermissionCode"
            ></FileData>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="bottom-button">
        <GlobalButton :button-list="formBottomButton"></GlobalButton>
      </div>
    </el-drawer>

    <!-- 合同信息 -->
    <DialogForm
      :options="contractInformationForm.options"
      :title="contractInformationForm.title"
      v-model:visible="contractInformationForm.visible"
      @get-model="form => (contractInformationForm.form = form)"
      @submit-form="saveAddContractInformationForm"
    ></DialogForm>

    <!-- 教育经历 -->
    <DialogForm
      :options="educationExperienceForm.options"
      :title="educationExperienceForm.title"
      v-model:visible="educationExperienceForm.visible"
      @get-model="form => (educationExperienceForm.form = form)"
      @submit-form="saveAddEducationExperienceForm"
    ></DialogForm>

    <!-- 家人信息 -->
    <DialogForm
      :options="familyInfoForm.options"
      :title="familyInfoForm.title"
      v-model:visible="familyInfoForm.visible"
      @get-model="form => (familyInfoForm.form = form)"
      @submit-form="saveAddFamilyInfoForm"
    ></DialogForm>

    <!-- 财务信息 -->
    <DialogForm
      :options="financialInfoForm.options"
      :title="financialInfoForm.title"
      :form-attrs="financialInfoForm.formAttrs"
      v-model:visible="financialInfoForm.visible"
      @get-model="form => (financialInfoForm.form = form)"
      @submit-form="saveAddFinancialInfoForm"
    ></DialogForm>

    <!-- 其他信息 -->
    <DialogForm
      :options="otherInfoForm.options"
      :title="otherInfoForm.title"
      v-model:visible="otherInfoForm.visible"
      @get-model="form => (otherInfoForm.form = form)"
      @submit-form="saveAddOtherInfoForm"
    ></DialogForm>

    <!-- 工作经历 -->
    <DialogForm
      :options="workExperienceForm.options"
      :title="workExperienceForm.title"
      v-model:visible="workExperienceForm.visible"
      @get-model="form => (workExperienceForm.form = form)"
      @submit-form="saveAddWorkExperienceForm"
    ></DialogForm>

    <!-- 离职 -->
    <DialogForm
      :options="leaveForm.options"
      :title="leaveForm.title"
      v-model:visible="leaveForm.visible"
      @get-model="form => (leaveForm.form = form)"
      @submit-form="saveLeaveForm"
    ></DialogForm>

    <!-- 修改员工类型 -->
    <DialogForm
      :options="changeTypeForm.options"
      :title="changeTypeForm.title"
      v-model:visible="changeTypeForm.visible"
      @get-model="form => (changeTypeForm.form = form)"
      @submit-form="saveAddChangeTypeForm"
    ></DialogForm>

    <!-- 岗位掉换 -->
    <DialogForm
      :options="changeDeptForm.options"
      :title="changeDeptForm.title"
      v-model:visible="changeDeptForm.visible"
      @get-model="form => (changeDeptForm.form = form)"
      @submit-form="saveAddChangeDeptForm"
    ></DialogForm>

    <!-- 住宿详情 -->
    <el-dialog v-model="stayDetail.visible" title="住宿详情" width="800" top="3vh">
      <div class="stay-box">
        <div class="stay-box-1" v-for="(item, index) in stayDetail.data" :key="index">
          <div class="stay-box-1-1-title">{{ item.key }}</div>
          <div class="stay-box-1-1">
            <div class="stay-box-1-1-son" v-for="(son, son_key) in item.value" :key="son_key">{{ son.name }}</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <PrintBox v-model:visible="printBox.visible" :print-params="printBox.row"></PrintBox>
  </div>
</template>

<script setup lang="ts">
import { ProTableInstance } from '@/components/ProTable/interface';
import { ProFormInstance } from '@/components/ProForm/interface';

import {
  familyInfoListById,
  rosterPageList,
  workInfoList,
  educationInfoList,
  contractInfoListByRosterId
} from '$api/personnel/roster/roster';

import { useDataGrid } from './hooks/table/use-dataGrid';
import { useContractInformationData } from './hooks/table/use-contractInformationData';
import { useEducationExperienceData } from './hooks/table/use-educationExperienceData';
import { useFamilyInfoData } from './hooks/table/use-familyInfoData';
import { useFinancialInfoData } from './hooks/table/use-financialInfoData';
import { useOtherInfoData } from './hooks/table/use-otherInfoData';
import { useWorkExperienceData } from './hooks/table/use-workExperienceData';

import PrintBox from './print/Print.vue';

const proTableBox = ref<ProTableInstance>();
const proTableFamilyInfo = ref<ProTableInstance>();
const proTableWorkExperience = ref<ProTableInstance>();
const proTableEducationExperience = ref<ProTableInstance>();
const proTableFinancialInfo = ref<ProTableInstance>();
const proTableContractInformation = ref<ProTableInstance>();
const proTableOtherInfo = ref<ProTableInstance>();
const proFormBox = ref<ProFormInstance>();

const _tableTransitionEnum = (e: any, value: any) => tableTransitionEnum(e, value);

const fileRef = ref<any>();

const tabClick = row => {
  tabsObj.value.activeName = row.paneName;
  const { activeName } = tabsObj.value;

  switch (activeName) {
    case 'familyInfo':
      familyInfoData.initParam.rosterId = drawerObj.value.id;
      // tableSetDictionariesEnum(familyInfoData);
      break;
    case 'workExperience':
      workExperienceData.initParam.rosterId = drawerObj.value.id;
      break;
    case 'educationExperience':
      educationExperienceData.initParam.rosterId = drawerObj.value.id;
      break;
    case 'financialInfo':
      financialInfoData.initParam.rosterId = drawerObj.value.id;
      getFinancialInfoData();
      break;
    case 'contractInformation':
      contractInformationData.initParam.rosterId = drawerObj.value.id;
      break;
    case 'otherInfo':
      otherInfoData.initParam.rosterId = drawerObj.value.id;
      getOtherInfoData();
      break;
    case 'file':
      setFileId(drawerObj.value.id);
      nextTick(() => {
        fileRef.value?.changePermission();
      });
      break;
  }
};

const {
  dataGrid,
  addForm,
  drawerObj,
  tabsObj,
  leaveForm,
  saveLeaveForm,
  saveAddChangeTypeForm,
  changeTypeForm,
  saveAddChangeDeptForm,
  changeDeptForm,
  printBox,
  dataCallback,
  formBottomButton,
  dataGridCellClick,
  stayDetail,
  fileObj,
  setFileId
} = useDataGrid(proTableBox, proFormBox);
/**
 * 合同信息
 */
const { contractInformationData, contractInformationForm, saveAddContractInformationForm } = useContractInformationData(
  proTableContractInformation,
  drawerObj
);
/**
 * 教育经历
 */
const { educationExperienceData, saveAddEducationExperienceForm, educationExperienceForm } = useEducationExperienceData(
  proTableEducationExperience,
  drawerObj
);
/**
 * 家人信息
 */
const { familyInfoData, saveAddFamilyInfoForm, familyInfoForm } = useFamilyInfoData(proTableFamilyInfo, drawerObj);
/**
 * 财务信息
 */
const { financialInfoData, saveAddFinancialInfoForm, financialInfoForm, getFinancialInfoData } = useFinancialInfoData(
  proTableFinancialInfo,
  drawerObj
);
/**
 * 其他信息
 */
const { otherInfoData, saveAddOtherInfoForm, otherInfoForm, getOtherInfoData } = useOtherInfoData(proTableOtherInfo, drawerObj);
/**
 * 工作经历
 */
const { workExperienceData, saveAddWorkExperienceForm, workExperienceForm } = useWorkExperienceData(
  proTableWorkExperience,
  drawerObj
);
</script>

<style lang="scss" scoped src="./index.scss"></style>
